<template>
    <div class="box">
        <div class="header">
            <el-button type="primary" :icon="Plus" solid @click="openDialog">添加网红小店</el-button>
        </div>
        <div class="content">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="名字" width="180" />
                <el-table-column prop="address" label="地址" />
                <el-table-column prop="url" label="小店图片">
                    <template #default="scope">
                        <img class="whxd-img" :src="scope.row.url[0]" alt="">
                    </template>
                </el-table-column>
                <!-- 标签栏 -->
                <el-table-column prop="label" label="小店标签">
                    <template #default="scope">
                        <el-tag v-for="(item, index) in scope.row.label" :key="index" type="warning">{{ item }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="businessHours" label="营业时间" />
                <el-table-column props="label" label="操作">
                    <template #default="scope">
                        <el-button type="success" :icon="Edit" @click="openDialog('edit',scope.row)">修改</el-button>
                        <el-button type="danger" :icon="Delete" @click="deleteItem(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="whxdVisible" :title="dialogType ==='add' ?'新增网红小店' : '编辑网红小店'" width="500" center>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto">
                <el-form-item label="小店名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="ruleForm.address" type="textarea" />
                </el-form-item>
                <el-form-item label="营业时间" prop="businessHours">
                    <el-time-select v-model="ruleForm.startTime" style="width: 140px" :max-time="ruleForm.endTime"
                        placeholder="开始时间" start="00:00" step="00:30" end="23:59" />
                    <el-time-select v-model="ruleForm.endTime" style="width: 140px" :min-time="ruleForm.startTime"
                        placeholder="结束时间" start="00:00" step="00:30" end="23:59" />
                </el-form-item>
                <el-form-item label="店铺标签" prop="label">
                    <el-input-tag v-model="ruleForm.label" placeholder="请输入标签" aria-label="请输入后敲击回车" />
</el-form-item>
                    <el-form-item label="店铺介绍" prop="remark">
                        <el-input v-model="ruleForm.remark" type="textarea" />
                    </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import data from "@/utils/data ";
import { ref, onMounted } from "vue";
const tableData = ref(data);
console.log(data, 'data')
const whxdVisible = ref(false);
const ruleFormRef = ref()
console.log('ruleFormRef',ruleFormRef.value)

const ruleForm = ref({
    name: '',
    address: '',
    startTime: '',
    endTime: '',
    url: [],
    label: [],
})
const dialogType=ref('add')
const whxdId=ref(null)


const openDialog = (type,row) => {
    ruleForm.value={
         name: '',
    address: '',
    startTime: '',
    endTime: '',
    urlList: [],
    label: [],
    }

    whxdVisible.value = true;
    console.log('type----',type)
    console.log('row----',row)
    if(type == 'edit'){
        dialogType.value='edit'
        ruleForm.value={...row}

        ruleForm.value.startTime =row.businessHours.split('-')[0]
        ruleForm.value.endTime =row.businessHours.split('-')[1]
        whxdId.value=row.id
    }else{
        dialogType.value='add'
        whxdId.value=null
    }
}

onMounted(() => {
    const savedData = localStorage.getItem('whxdData')
    if (savedData) {
        tableData.value = JSON.parse(savedData)
    } else {
        tableData.value = data
    }
})

const deleteItem = (index) => {
    tableData.value.splice(index, 1)
    localStorage.setItem('whxdData', JSON.stringify(tableData.value))
}

const submitForm = async (formE1) => {
    if (!formE1) return
    await formE1.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(ruleForm.value)

            const maxId = tableData.value.length > 0
                ? Math.max(...tableData.value.map(item => item.id || 0))
                : 0

            if(whxdId.value){
                 const index = tableData.value.findIndex(item=> item.id ===whxdId.value)
                 tableData.value[index] ={
                id: whxdId.value,
                name: ruleForm.value.name,
                address: ruleForm.value.address,
                businessHours: `${ruleForm.value.startTime || ''} - ${ruleForm.value.endTime || ''}`,
                url: ruleForm.value.url || [],
                label: ruleForm.value.label || [],
               
            
            }
        }else{
            tableData.value.push({
                 id: maxId + 1,
                name: ruleForm.value.name,
                address: ruleForm.value.address,
                businessHours: `${ruleForm.value.startTime || ''} - ${ruleForm.value.endTime || ''}`,
                url: ruleForm.value.urleList || [],
                label: ruleForm.value.label || [],
            })
        }
            

           

          
            localStorage.setItem('whxdData', JSON.stringify(tableData.value))
            ruleForm.value = {
                name: '',
                address: '',
                startTime: '',
                endTime: '',
                urlList: [],
                label: [],
            }

            whxdVisible.value = false
        }else{
            console.log('error submit!',fields)
            
        


        }
    })
}
</script>
<style scoped lang="scss">
.box {
    padding: 20px;

    .header {
        display: flex;
        justify-content: flex-end;
    }

    .content {
        margin-top: 20px;

        .whxd-img {
            width: 100px;
            height: 100px;
        }
    }
}
</style>